<template>
  <div>
    <table class="tableOne">
      <tr>
        <th style="width: 189px;">属性</th>
        <th style="width: 189px;">基准值</th>
        <th style="width: 189px;">下限值</th>
        <th style="width: 189px;">上限值</th>
        <th style="width: auto;"></th>
      </tr>
    </table>
    <div style="height: 320px;overflow-y: auto;">
      <table class="tableOne">
        <tr v-for="(item,index) in limitList" :key="index">
          <td class="columnStyle">
            <span>{{item.iotCollItem.name}}</span>
          </td>
          <td class="columnStyle">
            <InputNumber v-model="item.baseValue" size="small" style="width: 100%;"></InputNumber>
          </td>
          <td class="columnStyle">
            <InputNumber v-model="item.lowLimit" size="small" style="width: 100%;"></InputNumber>
          </td>
          <td class="columnStyle">
            <InputNumber v-model="item.upperLimit" size="small" style="width: 100%;"></InputNumber>
          </td>
        </tr>
      </table>
    </div>
  </div>
</template>

<script>
  export default {
    name: 'LimitSetting',
    props: {
    },
    mounted: function () {
      this.connectDatas()
      window.vm.$on('deviceTypeObj', (data) => {
        this.devTypeObj = JSON.parse(JSON.stringify(data))
        this.typeCollItems = this.devTypeObj.iotCollItems
        this.typeCollItems.map(son => {
          son.isGet = son.isGet ? 1 : 0
        })
        this.limitList = []
        this.connectDatas()
      })
    },
    data () {
      return {
        devTypeObj: {},
        typeCollItems: [],
        limitList: []
      }
    },
    methods: {
      connectDatas () {
        if (this.limitList.length === 0) {
          this.limitList = this.typeCollItems.map(item => {
            let newLimit = {
              iotCollItem: item,
              baseValue: 0,
              lowLimit: item.warnDown || 0,
              upperLimit: item.warnUp || 0
            }
            return newLimit
          })
        }
      },
      refreshEditData (data) {
        this.limitList = data.iotLimits
        this.typeCollItems = data.iotDevType.iotCollItems
        this.connectDatas()
      }
    }
  }
</script>

<style scoped>
  .tableOne {
    width: 100%;
    border-spacing: 0px;
    table-layout: fixed;
  }

  table th,
  td {
    border: 1px solid #e9eaec;
    margin: 0;
    padding: 3px;
  }

  table tr {
    margin: 0;
  }

  .columnStyle {
    text-align: center;
  }

</style>
